<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page language="c#" Src="Demo.aspx.cs" AutoEventWireup="false" Inherits="Brettle.Web.NeatUpload.GreyBoxProgressBarDemo" %>
<%@ Register TagPrefix="GreyBoxUpload" Namespace="Brettle.Web.NeatUpload" Assembly="Brettle.Web.NeatUpload.GreyBoxProgressBar" %>
<%@ Register TagPrefix="Upload" Namespace="Brettle.Web.NeatUpload" Assembly="Brettle.Web.NeatUpload" %>
<html>
	<head runat="server">
		<title>NeatUpload GreyBoxProgressBar Demo</title>
		<style type="text/css">
<!--
		.ProgressBar {
			margin: 0px;
			border: 0px;
			padding: 0px;
			width: 100%;
			height: 2em;
		}
-->
		</style>
	</head>
	<body>
		<form id="uploadForm" runat="server">
			<h1>NeatUpload GreyBoxProgressBar Demo</h1>
			<p>
			This page demonstrates NeatUpload's GreyBoxProgressBar extension.
			</p>
			<p>
			Select a files using the InputFile control below and click Submit.
			</p>
			<p>
			Pick file: <Upload:InputFile id="inputFile" runat="server" /><br/>

			<span id="submitButtonSpan" runat="server">
			<asp:Button id="submitButton" runat="server" Text="Submit" />
			<asp:Button id="cancelButton" runat="server" Text="Cancel" CausesValidation="False"/><br />
			</span>


			<pre id="bodyPre" runat="server">
			
			</pre>
			<div id="popupProgressBarDiv" runat="server">
			<h2>GreyBoxProgressBar</h2>
			<p>
			Here's what is generated by a GreyBoxProgressBar control:
			</p> 
			<GreyBoxUpload:GreyBoxProgressBar id="progressBar" runat="server" Triggers="submitButton" ></GreyBoxUpload:GreyBoxProgressBar>
			<p>
			<strong>What?  You don't see anything?</strong>  That's because you have JavaScript enabled.  With JavaScript
			enabled, the progress bar is shown automatically when you submit the form, so there is no need to display anything
			extra on this page. 	If you disable JavaScript, you will see a "Check Progress" link which you can click
			on to display the progress bar in a new window.  The text of that link is configurable.
			</p>
			</div>
			
			<h2>Cancelling Uploads</h2>
			<p>
			You can cancel your upload by either clicking your browser's Stop button or clicking the Cancel button that
			is displayed to the right of the progress bar when the upload is in progress.
			</p>
			
		</form>
	</body>
</html>
